<template>
  <el-form :model="form" ref="form" label-width="100px" :rules="rules">
    <el-form-item label="事件描述:">{{ form.evalItemName }}</el-form-item>
    <el-row :gutter="16">
      <el-col>
        <el-form-item label="考核标准:">{{ form.standard }}</el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="项目类型:">
          <span>{{form.rewardOrientation === 1 ? '分' : '钱'}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="标准值:">
          <span>{{form.rewardStandard}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="上下限:">
          <template></template>
          <span>{{ upLimit ? '无下限' : form.rewardLowLimit }} 至 {{ lowLimit ? '无上限' : form.rewardUpLimit }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="奖惩类型:"
          prop="rewardType"
          :rules="form.rewardType === 3 ? rules.rewardType : []"
        >
          <template v-if="reward === 3">
            <el-radio-group v-model="form.rewardType" @change="e => radioChange(e)">
              <el-radio :label="1">奖</el-radio>
              <el-radio :label="2">惩</el-radio>
            </el-radio-group>
          </template>
          <template v-else>
            <el-radio-group v-model="form.rewardType" @change="e => radioChange(e)">
              <el-radio :label="1" :disabled="form.rewardType !== 3">奖</el-radio>
              <el-radio :label="2" :disabled="form.rewardType !== 3">惩</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="奖惩值:" prop="rewardValue">
          <el-input v-model.number="form.rewardValue" placeholder="请输入奖惩值" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="发生日期:" prop="eventDate">
          <el-date-picker
            style="width: 178px"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            v-model="form.eventDate"
            :picker-options="pickerOptions"
            placeholder="请选择"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="说明:">
      <el-input
        type="textarea"
        show-word-limit
        :autosize="{ minRows: 3, maxRows: 5}"
        placeholder="请输入说明"
        v-model="form.eventDescribe"
        maxlength="85"
      />
    </el-form-item>
    <el-divider />
    <el-form-item label="追加责任:">
      <div class="mb20">
        <el-button @click="handleAdd">增加</el-button>
      </div>
      <e-table
        ref="eTable"
        :tableData="tableData"
        :columns="columns"
        :loading="loading"
        :pageObj="null"
        :total="total"
      >
        <el-table-column slot="targetMode" label="责任对象" align="center" width="80">
          <template slot-scope="scope">{{ scope.row.targetMode === 1 ? '科室' : '个人' }}</template>
        </el-table-column>
        <el-table-column slot="rewardValue" label="数值" align="center" width="100">
          <template slot-scope="scope">{{ scope.row.rewardValue }}</template>
        </el-table-column>
        <el-table-column label="处理" slot="handle" align="center" width="100">
          <template
            slot-scope="scope"
          >{{ form.rewardType === 1 ? ( scope.row.rewardOrientation === 1 ? '加分' : '奖钱') : (scope.row.rewardOrientation === 1 ? '扣分' : '罚钱') }}</template>
        </el-table-column>
        <el-table-column slot="action" label="操作" width="60" align="center">
          <template slot-scope="scope">
            <el-button type="text" class="red" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </e-table>
    </el-form-item>
  </el-form>
</template>

<script>
import { openNotification, getSession } from '@/utils/util'

export default {
  data() {
    var rewardValueRule = (rule, value, callback) => {
      // 判断手机号是否正确
      if (value < 0) {
        callback(new Error('需要输入一个大于0的数字'))
      }
      if (this.form.rewardType === 1) {
        if (this.form.rewardUpLimit) {
          // 有值，不为null时
          if (value > this.form.rewardUpLimit) {
            callback(new Error('奖惩类型为奖时，奖惩值不能超过奖惩上限'))
            this.$set(this.form, 'rewardValue', this.form.rewardUpLimit)
          } else {
            callback()
          }
        } else {
          callback()
        }
      } else if (this.form.rewardType === 2) {
        if (this.form.rewardLowLimit) {
          if (value > Math.abs(this.form.rewardLowLimit)) {
            callback(new Error('奖惩类型为惩时，奖惩值不能小于奖惩下限，为正值'))
            this.$set(this.form, 'rewardValue', Math.abs(this.form.rewardLowLimit))
          } else {
            callback()
          }
        } else {
          callback()
        }
      } else if (this.form.rewardType === 3) {
        console.log('rewardType 等于 3')
        this.$message.error('请先选择奖惩类型')
        this.$set(this.form, 'rewardValue', null)
        callback(new Error('需要选择奖惩类型'))
      } else {
        callback()
      }
    }
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      lowLimit: false,
      upLimit: false,
      type: null,
      reward: null, // 奖/惩
      form: {
        rewardType: null,
        rewardValue: null,
        eventDate: null,
        remark: null
      },
      loading: false,
      // 表头
      columns: [
        { slot: 'targetMode' },
        {
          label: '对象名称',
          prop: 'targetName'
        },
        { slot: 'handle' },
        { slot: 'rewardValue' },
        { slot: 'action' }
      ],
      rules: {
        rewardValue: [
          { required: true, validator: rewardValueRule, message: '请输入奖惩值', trigger: 'blur' }, // ,
          { type: 'number', message: '请输入一个数字', trigger: 'blur' }
        ],
        rewardType: [{ required: true, message: '请选择一个奖惩类型', trigger: 'blur' }],
        eventDate: [{ required: true, message: '请选择发生日期', trigger: 'blur' }]
      },
      tableData: [],
      total: 1,
      evalListRow: getSession('evalListRow')
    }
  },
  methods: {
    radioChange(value) {
      console.log('value', value)
    },
    show(obj) {
      this.reward = obj.rewardType
      this.form = Object.assign(this.form, obj)

      if (!obj.rewardUpLimit) {
        this.upLimit = true
      }
      if (!obj.rewardLowLimit) {
        this.lowLimit = true
      }
    },
    showTable(obj) {
      const obj2 = Object.assign({}, obj)
      let arr = []
      obj2.targetId.map((v, i) => {
        arr.push({
          targetId: v,
          targetName: obj2.targetName[i],
          rewardValue: obj2.rewardValue,
          targetMode: obj2.targetMode,
          rewardOrientation: obj2.rewardOrientation
        })
      })
      console.log('处理的数组 arr', arr)

      // this.tableData.push(obj2)
      this.tableData = [...this.tableData, ...arr]
    },
    handleAdd() {
      if (this.form.rewardType === 3) {
        this.$message.error('请先选择奖惩类型')
        return false
      }
      const { rewardType, rewardOrientation, rewardUpLimit, rewardLowLimit } = this.form
      this.$emit('showDialog', { rewardType, rewardOrientation, rewardUpLimit, rewardLowLimit })
    },
    getParam() {
      this.$refs.form.validate(valid => {
        console.log('valid', valid)

        if (valid) {
          if (this.tableData.length > 0) {
            this.$set(this.form, 'evalEventExtradutyList', this.tableData)
            this.$set(this.form, 'extraDuty', 1)
          } else {
            this.$set(this.form, 'evalEventExtradutyList', [])
            this.$set(this.form, 'extraDuty', 0)
          }

          this.$emit('postParam', this.form)
        } else {
          this.$emit('notSubmit')
        }
      })
    },
    handleDelete(row) {
      const _this = this
      this.$confirm({
        title: '删除操作',
        content: `您确定删除这条记录吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        onOk() {
          const index = _this.tableData.findIndex(v => v.spec === row.spec)
          _this.tableData.splice(index, 1)
          // 调用删除接口，刷新表格数据
          openNotification('success', '删除成功')
        }
      })
    }
  }
}
</script>
